<template>
  <view class="p-activity-h" v-if="subsidyAmount > 0">
    <view class="_lf">
      <view :style="{'display': 'flex','align-items': checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount) ? 'center' : 'flex-end'}">
        <text style="margin-right: 2px;flex-shrink: 0;">补贴价</text>
        <x-price v-if="subsidyPrice" :price="subsidyPrice" :TipsSize="24" :Price1Size="checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount) ? 36 : 54" :Price2Size="checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount) ? 36 : 54" color="#ffffff"></x-price>
        <x-price v-else :price="(productPrice - subsidyAmount)" :TipsSize="24" :Price1Size="checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount) ? 36 : 54" :Price2Size="checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount) ? 36 : 54" color="#ffffff"></x-price>
        <text v-if="isShowUp" class="_up">起</text>
        <view class="_tips" v-if="checkCouponPrice && Number(checkCouponPrice) !== Number(productPrice - subsidyAmount)">
          <text class="_coupon-after">券后¥</text>
          <text>{{ checkCouponPrice }}</text>
          <text v-if="isShowUp" class="_up _red">起</text>
        </view>
      </view>
      <view style="display: flex;margin-top:5px;align-items: center;color: #FFDED7">
        <text v-if="productPrice">全网低价<text class="_through">¥{{ productPrice }}</text></text>
        <view v-if="productPrice" style="margin: 0 4px;color: #F7988A;height: 8px;overflow:hidden;border-left: 1px solid #F7988A;"></view>
        <view v-if="type === 'adv' && hotSales > 0">总售{{ numberFormat(hotSales + sales) }}件</view>
        <view v-if="type !== 'adv'">总售{{ numberFormat(sales) }}件</view>
        <view class="_tips2">补贴{{ subsidyAmount }}元</view>
      </view>
    </view>
    <view class="_rt">
      <view style="width: 60%;margin-left: 10%;">
        <x-image src="/assets/images/subsidy-text.png" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XPrice from '@/components/x-price';

export default {
  name: 'PActivity',
  components: {
    XPrice,
    XImage
  },
  props: {
    isShowUp: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'adv'
    },
    hotSales: { // 热销量，由后台控制
      type: Number,
      default: 0
    },
    sales: { // 销量
      type: Number,
      default: 0
    },
    subsidyAmount: { // 补贴金额
      type: [String, Number],
      default: ''
    },
    subsidyPrice: { // 补贴之后的价格
      type: [String, Number],
      default: ''
    },
    productPrice: {
      type: [String, Number],
      default: ''
    },
    checkCouponPrice: {
      type: [String, Boolean],
      default: ''
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    numberFormat(val) {
      return this.$tools.numberFormat(val);
    }
  }
};
</script>

<style lang="scss" scoped>
.p-activity-h{
  display: flex;
  width: 100%;
  background: $uni-color-primary;
  ._lf{
    color: #FFFFFF;
    padding: 15px 0 26px 22px;
    font-size: 26px;
    flex: 1;
    ._up {
      margin-left: 4px;
      font-size: 22px;
      color: #FFFFFF;
    }
    ._red {
      color: #EB441F;
    }
    ._tips{
      padding: 0 18px;
      //height: 40px;
      display: flex;
      align-items: center;
      font-size: 50px;
      font-weight: bold;
      color: $uni-color-primary;
      background: #FFECD5;
      border-radius: 100px;
      margin-left: 20px;
      margin-bottom: 4px;
      ._coupon-after{
        font-size: 28px;
        margin-right: 6px;
      }
    }
    ._tips1{
      padding: 0 6px;
      //height: 30px;
      display: flex;
      align-items: center;
      font-size: 24px;
      color: #FFDED7;
      background: transparent;
      border: 2px solid #F9A69B;
      border-radius: 6px;
      margin-left: 14px;
    }
    ._tips2{
      padding: 0 12px;
      height: 32px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: $uni-color-primary;
      background: #FFECD5;
      border-radius: 20px;
      margin-left: 12px;
    }
  }
  ._rt{
    width: 163px;
    background-image: cdn("/images/goods-title-bg2-2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ._through{
    text-decoration:line-through
  }
}
</style>
